<script setup lang="ts">
import { computed } from 'vue';
import { useAppStore } from '@/store/modules/app';
import { useThemeStore } from '@/store/modules/theme';
import { useRouteStore } from '@/store/modules/route';
import { useTabStore } from '@/store/modules/tab';
import { LAYOUT_SCROLL_EL_ID } from '@sa/materials';

defineOptions({ name: 'ClientContent' });

interface Props {
  /** Show padding for content */
  showPadding?: boolean;
}

withDefaults(defineProps<Props>(), {
  showPadding: true
});

const appStore = useAppStore();
const themeStore = useThemeStore();
const routeStore = useRouteStore();
const tabStore = useTabStore();

// 获取页面过渡效果
const transitionName = computed(() => (themeStore.page.animate ? themeStore.page.animateMode : ''));

function resetScroll() {
  const el = document.querySelector(`#${LAYOUT_SCROLL_EL_ID}`);

  el?.scrollTo({ left: 0, top: 0 });
}
</script>

<template>
  <main class="h-full overflow-hidden">
    <div class="h-full overflow-auto" :id="LAYOUT_SCROLL_EL_ID">
      <RouterView v-slot="{ Component, route }">
        <Transition
          :name="transitionName"
          mode="out-in"
          @before-leave="appStore.setContentXScrollable(true)"
          @after-leave="resetScroll"
          @after-enter="appStore.setContentXScrollable(false)"
        >
          <KeepAlive :include="routeStore.cacheRoutes" :exclude="routeStore.excludeCacheRoutes">
            <component
              :is="Component"
              v-if="appStore.reloadFlag"
              :key="tabStore.getTabIdByRoute(route)"
              :class="{ 'p-16px': showPadding }"
              class="flex-grow bg-layout transition-300"
            />
          </KeepAlive>
        </Transition>
      </RouterView>
    </div>
  </main>
</template>

<style scoped></style> 